// 放置自定义指令
// Vue插件: 一个特殊的对象：
// https://v3.cn.vuejs.org/guide/plugins.html#%E7%BC%96%E5%86%99%E6%8F%92%E4%BB%B6
// 1. 有一个install方法，它的参数在代码运行的过程中，会自动传入vue实例
// 2. app.use(插件)，它会自动执行 插件的install方法，并自动传入vue实例

import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  install(app) {
    // console.log('install.....')

    app.directive('imgLazy', {
      // el：指令所绑定的元素，可以用来直接操作 DOM。
      // binding：一个对象，包含以下 property：
      //  name：指令名，不包括 v- 前缀。
      //  value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
      //  oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
      //  expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
      //  arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
      //  modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

      mounted(el, binding) {
        // 图片懒加载的逻辑：
        //  1. 给图片一个默认占位图，初始显示它（优化）
        el.src = defaultImg
        //  2. 监听图片 el 是否处于可见区域，如可见，将图片url数据binding.value赋值给给 el 的src属性来加载图片
        // console.log('imgLazy', el, binding.value)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            // console.log(el, isIntersecting, stop)
            if (isIntersecting) {
              // 图片从不可见 ---> 可见
              // 1. 停止监听
              stop()
              // 2. 设置src
              el.src = binding.value
            }
          },
          { threshold: 0.1 }
        )
      }
    })
  }
}
